<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>Color Admin | Form Elements</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <link href="/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <link href="/assets/plugins/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/plugins/font-awesome/5.0/css/fontawesome-all.min.css" rel="stylesheet" />
    <link href="/assets/plugins/animate/animate.min.css" rel="stylesheet" />
    <link href="/assets/css/default/style.min.css" rel="stylesheet" />
    <link href="/assets/css/default/style-responsive.min.css" rel="stylesheet" />
    <link href="/assets/css/default/theme/default.css" rel="stylesheet" id="theme" />
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
    <link href="/assets/plugins/parsley/src/parsley.css" rel="stylesheet" />
    <!-- ================== END PAGE LEVEL STYLE ================== -->

    <!-- ================== BEGIN BASE JS ================== -->
    <script src="/assets/plugins/pace/pace.min.js"></script>
    <!-- ================== END BASE JS ================== -->
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade show"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <!-- begin #header -->
    <div th:replace="/common/header :: header">

    </div>
    <!-- end #header -->

    <!-- begin #sidebar -->
    <div th:replace="/common/sidebar :: sidebar">

    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" class="content">
        <!-- begin breadcrumb -->
        <ol class="breadcrumb pull-right">
            <li class="breadcrumb-item"><a href="javascript:;">主页</a></li>
            <li class="breadcrumb-item"><a href="javascript:;">系统设置</a></li>
            <li class="breadcrumb-item active" th:text="${obj!=null?'编辑菜单':'新增菜单'}"></li>
        </ol>
        <!-- end breadcrumb -->
        <!-- begin page-header -->
        <h1 class="page-header" th:text="${obj!=null?'编辑菜单':'新增菜单'}"></h1>
        <!-- end page-header -->

        <!-- begin row -->
        <div class="row">
            <!-- begin col-6 -->
            <div class="col-lg-6">
                <!-- begin panel -->
                <div class="panel panel-inverse" data-sortable-id="form-stuff-1">
                    <!-- begin panel-heading -->
                    <div class="panel-heading">
                        <div class="panel-heading-btn">
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                        </div>
                        <h4 class="panel-title" th:text="${obj!=null?'编辑菜单':'新增菜单'}"></h4>
                    </div>
                    <!-- end panel-heading -->
                    <!-- begin panel-body -->
                    <div class="panel-body">
                        <div class="alert alert-secondary">
                            <h6>1、菜单新增需要注意赋值权限</h6>
                            <h6>2、菜单具有删除商品、店铺的权限</h6>
                            <h6>3、菜单具有操作用户、订单的权限</h6>
                        </div>
                        <form action="/menu/save" method="post" data-parsley-validate="true">
                            <input type="hidden" name="id" th:if="${obj!=null}" th:value="${obj!=null ? obj.id : ''}" />
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">菜单名称</label>
                                <div class="col-md-9">
                                    <input type="text" name="name" class="form-control m-b-5" th:value="${obj!=null?obj.name:''}"  data-parsley-required="true" data-parsley-minlength="2" data-parsley-maxlength="100" placeholder="请输入菜单名称" />

                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">菜单地址</label>
                                <div class="col-md-9">
                                    <input type="text" name="url" class="form-control m-b-5" th:value="${obj!=null?obj.url:''}" data-parsley-remote data-parsley-errors-messages-disabled data-parsley-remote-validator='urlValidator'  placeholder="请输入菜单地址" />
                                </div>
                            </div>

                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">菜单类型</label>
                                <div class="col-md-9">
                                    <select class="form-control" name="type" data-parsley-required="true">
                                        <option value="">请选择</option>
                                        <option value="ADMIN" th:selected="${obj!=null and obj.type=='ADMIN'}">平台菜单</option>
                                        <option value="SELLER" th:selected="${obj!=null and obj.type=='SELLER'}">商户菜单</option>
                                        <option value="BUYER" th:selected="${obj!=null and obj.type=='BUYER'}">用户菜单</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">操作标识</label>
                                <div class="col-md-9">
                                    <input type="text" name="ovalue" class="form-control m-b-5" th:value="${obj!=null?obj.ovalue:''}" data-parsley-required="true" data-parsley-minlength="2" data-parsley-maxlength="100"  placeholder="请输入操作标识" />
                                </div>
                            </div>

                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">父菜单</label>
                                <div class="col-md-9">
                                    <select class="form-control" name="parentId" >
                                        <option value="">请选择</option>
                                        <option th:each="menu:${menus}"  th:selected="${obj!=null and obj.parentId==menu.id}" th:value="${menu.id}" th:text="${menu.name}"></option>

                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-7 offset-md-3">
                                    <button type="submit" class="btn btn-sm btn-primary m-r-5">提交</button>
                                    <button type="button" class="btn btn-sm btn-default" onclick="window.location.href='/menu/list'">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- end panel-body -->

                </div>
                <!-- end panel -->


            </div>
            <!-- end col-6 -->

        </div>
        <!-- end row -->

    </div>
    <!-- end #content -->

    <!-- begin theme-panel -->
    <div th:replace="/common/theme :: theme">

    </div>
    <!-- end theme-panel -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- end page container -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/jquery/jquery-3.2.1.min.js"></script>
<script src="/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="/assets/plugins/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<!--[if lt IE 9]>
<script src="/assets/crossbrowserjs/html5shiv.js"></script>
<script src="/assets/crossbrowserjs/respond.min.js"></script>
<script src="/assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/js-cookie/js.cookie.js"></script>
<script src="/assets/js/theme/default.min.js"></script>
<script src="/assets/js/apps.min.js"></script>
<!-- ================== END BASE JS ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="/assets/plugins/highlight/highlight.common.js"></script>
<script src="/assets/js/demo/render.highlight.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script src="/assets/plugins/parsley/dist/parsley.js"></script>
<script src="/assets/plugins/parsley/dist/i18n/zh_cn.js"></script>

<script>

    window.Parsley.addAsyncValidator('urlValidator', function (xhr) {
        console.log(this.$element); // jQuery Object[ input[name="q"] ]
        console.log(xhr)
        console.log(xhr.responseJSON)

        if(10000 != xhr.responseJSON.code){
            window.ParsleyUI.removeError(this,'errorUrl',true);
            window.ParsleyUI.addError(this,'errorUrl',xhr.responseJSON.msg);
        }else{
            window.ParsleyUI.removeError(this,'errorUrl',true);
        }

        return 10000 === xhr.responseJSON.code;
    }, '/menu/validator');


    $(document).ready(function() {
        App.init({
            disableDraggablePanel: true
        });
        Highlight.init();
    });
</script>
</body>
</html>
